import React, {useEffect, useState} from 'react';
import * as echarts from 'echarts'
import {getBarList} from "../../api";

const BarChart = () => {
    const drawChart=async()=>{
        const response = await getBarList()
        //TODO 为什么重新赋值，再取赋值之后的值就取不到

        // 获取 DOM 元素
        const chartDom = document.getElementById('barChart');
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartDom);
        // 指定图表的配置项和数据
        const option = {
            title: {
                text: '柱状图示例'
            },
            tooltip: {},
            xAxis: {
                data: response.data.data.map(item=>item.name)
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: response.data.data.map(item=>item.number)
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);

        // 组件卸载时销毁图表
        return () => {
            myChart.dispose();
        };

    }
    useEffect(() => {
        drawChart()
    }, []);// 空依赖数组确保 useEffect 只在组件挂载时运行一次

    return (
        <div id="barChart" style={{ width: '100%', height: '400px' }}></div>
    );
};

export default BarChart;